<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">

	<head>
		<title>爱学习官网</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500" rel="stylesheet">

		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/animate.css">
		<link rel="stylesheet" href="css/owl.carousel.min.css">

		<link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">

		<!-- Theme Style -->
		<link rel="stylesheet" href="css/style.css">
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			#box {
				position: relative;
				width: 300px;
				height: 40px;
				margin: 0 auto;
				margin-top: 10px;
				background-color: #e8e8e8;
				box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
			}
			
			.bgColor {
				position: absolute;
				left: 0;
				top: 0;
				width: 40px;
				height: 40px;
				background-color: lightblue;
			}
			
			.txt {
				position: absolute;
				width: 100%;
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				color: #000;
				text-align: center;
			}
			
			.slider {
				position: absolute;
				left: 0;
				top: 0;
				width: 50px;
				height: 100%;
				border: 1px solid #ccc;
				background: #fff;
				text-align: center;
				cursor: move;
			}
			
			.slider>i {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			
			.slider.active>i {
				color: green;
			}
			/* .btn {
        position: absolute;
        width: 40px;
        height: 32px;
        background: #fff url() center no-repeat;
        background-size: 13px;//不设置这个属性，背景图片会不成比例的显示
        border: 1px solid #ccc;
        cursor: move;
        } */
			
			.btns {
				position: absolute;
				width: 40px;
				height: 32px;
				background: #fff url() center no-repeat;
				background-size: 13px; //
				不设置这个属性，背景图片会不成比例的显示 border: 1px solid #ccc;
				cursor: move;
			}
		</style>

	</head>

	<body>

		<header role="banner" style="position: fixed;">

			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container-fluid">
					<img src="images/logo.jpg" width="109px" height="78px">
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>

					<div class="collapse navbar-collapse navbar-light" id="navbarsExample05">
						<ul class="navbar-nav">
							<li class="nav-item">
								<a class="nav-link active" href="index.jsp">首页</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="about.jsp">关于我们</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="contact.jsp">联系</a>
							</li>
						</ul>
						<ul class="navbar-nav absolute-right">
							<li>
								<a href="login.jsp">登录</a> /
								<a href="register.jsp">注册</a>
							</li>
						</ul>

					</div>
				</div>
			</nav>
		</header>
		<!-- END header -->

		<section class="site-hero site-sm-hero overlay" data-stellar-background-ratio="0.5" style="background-image: url(images/big_image_2.jpg);">
			<div class="container">
				<div class="row align-items-center justify-content-center site-hero-sm-inner">
					<div class="col-md-7 text-center">

						<div class="mb-5 element-animate">
							<h1 class="mb-2">登录</h1>
							<p class="bcrumb">
								<a href="index.jsp">首页</a> <span class="sep ion-android-arrow-dropright px-2"></span> <span class="current">登录</span>
							</p>
						</div>

					</div>
				</div>
			</div>
		</section>
		<!-- END section -->

		<section class="site-section">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-md-7">
						<div class="form-wrap">
							<h2 class="mb-4">使用您的账户登录</h2>
							<form action="${pageContext.request.contextPath}/AccountLoginAndLogout" method="post">
								<input type="hidden" value="login" name="op" />
								<div class="row">
									<div class="col-md-12 form-group">
										<label for="phone">手机号</label> <input type="text" id="phone" class="form-control py-2" name="phone" onblur="f()">
									</div>
								</div>
								<div class="row mb-5">
									<div class="col-md-12 form-group">
										<label for="password">密码</label> <input type="password" id="password" class="form-control py-2" name="password">
									</div>
								</div>
								<div class="col-md-12 form-group">
									<input type="checkbox" name="checkbox" id="checkbox" value="remmber" />记住密码
								</div>
								<div id="dragContainer">
									<div id="box" onselectstart="return false;">
										<div class="bgColor"></div>
										<div class="txt">滑动验证</div>
										<!--给i标签添加上相应字体图标的类名即可-->

										<div class="slider">
											<i class="btn"></i>
										</div>
									</div>
								</div>

								<!--<div class="row">-->
								<div class="form-group container mt-3 text-center">
									<input type="submit" value="登录" id="login-btn" disabled="disabled" class="btn btn-primary px-5 py-2">
									<!--</div>-->
								</div>
							</form>
						</div>
						<div class="justify-content-end">
							<a href="../back/login.jsp">管理员登录</a>
						</div>
					</div>
				</div>
			</div>
		</section>

		<footer class="site-footer">
			<div class="container">
				<div class="row mb-5">
					<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
						<h3>爱学习</h3>
						<p></p>
					</div>
					<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
						<h3 class="heading">快速链接</h3>
						<div class="row">
							<div class="col-md-6">
								<ul class="list-unstyled">
									<li>
										<a href="index2.jsp">首页</a>
									</li>
									<li>
										<a href="about.jsp">关于我们</a>
									</li>
									<li>
										<a href="courses.jsp">培训班</a>
									</li>

								</ul>
							</div>

						</div>
					</div>

					<div class="col-md-6 col-lg-3 mb-5 mb-lg-0">
						<h3 class="heading">联系信息</h3>
						<div class="block-23">
							<ul>
								<li><span class="icon ion-android-pin"></span><span class="text">大连爱学习总部</span></li>
								<li><span class="icon ion-ios-telephone"></span><span class="text">+2 392 3929 210</span></li>
								<li><span class="icon ion-android-mail"></span><span class="text">865681467@qq.com</span></li>
								<li><span class="icon ion-android-time"></span><span class="text">星期一 &mdash; 星期五 8:00am - 5:00pm</span></li>
							</ul>
						</div>
					</div>
				</div>

			</div>
		</footer>
		<!-- END footer -->

		<!-- loader -->
		<div id="loader" class="show fullscreen">
			<svg class="circular" width="48px" height="48px">
				<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />
				<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#f4b214" />
			</svg>
		</div>

		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/jquery-migrate-3.0.0.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/owl.carousel.min.js"></script>
		<script src="js/jquery.waypoints.min.js"></script>
		<script src="js/jquery.stellar.min.js"></script>
		<script src="js/jquery.animateNumber.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
		<script src="js/main.js"></script>

		<script>
			window.onload = function() {
				var str = "${param.message}";
				if(str != "") {
					alert("对不起！登录失败！请重新登录！");
				}
			}
			//一、定义了一个获取元素的方法
			function getEle(selector) {
				return document.querySelector(selector);
			}
			//二、获取到需要用到的DOM元素
			var box = getEle("#box"), //容器
				bgColor = getEle(".bgColor"), //背景色
				txt = getEle(".txt"), //文本
				slider = getEle(".slider"), //滑块
				icon = getEle(".slider>i"),
				successMoveDistance = box.offsetWidth -
				slider.offsetWidth, //解锁需要滑动的距离
				downX, //用于存放鼠标按下时的位置
				isSuccess = false; //是否解锁成功的标志，默认不成功

			//三、给滑块添加鼠标按下事件
			slider.onmousedown = mousedownHandler;

			//3.1鼠标按下事件的方法实现
			function mousedownHandler(e) {
				bgColor.style.transition = "";
				slider.style.transition = "";
				var e = e || window.event || e.which;
				downX = e.clientX;
				//在鼠标按下时，分别给鼠标添加移动和松开事件
				document.onmousemove = mousemoveHandler;
				document.onmouseup = mouseupHandler;
			};

			//四、定义一个获取鼠标当前需要移动多少距离的方法
			function getOffsetX(offset, min, max) {
				if(offset < min) {
					offset = min;
				} else if(offset > max) {
					offset = max;
				}
				return offset;
			}

			//3.1.1鼠标移动事件的方法实现
			function mousemoveHandler(e) {
				var e = e || window.event || e.which;
				var moveX = e.clientX;
				var offsetX = getOffsetX(moveX - downX, 0, successMoveDistance);
				bgColor.style.width = offsetX + "px";
				slider.style.left = offsetX + "px";

				if(offsetX == successMoveDistance) {
					success();
				}
				//如果不设置滑块滑动时会出现问题（目前还不知道为什么）
				e.preventDefault();
			};

			//3.1.2鼠标松开事件的方法实现
			function mouseupHandler(e) {
				if(!isSuccess) {
					bgColor.style.width = 0 + "px";
					slider.style.left = 0 + "px";
					bgColor.style.transition = "width 0.8s linear";
					slider.style.transition = "left 0.8s linear";
				}
				document.onmousemove = null;
				document.onmouseup = null;
			};

			//五、定义一个滑块解锁成功的方法
			function success() {
				isSuccess = true;
				txt.innerHTML = "验证成功";
				bgColor.style.backgroundColor = "lightgreen";
				slider.className = "slider active";
				icon.className = "btns";
				//滑动成功时，移除鼠标按下事件和鼠标移动事件
				slider.onmousedown = null;
				document.onmousemove = null;

				document.getElementById("login-btn").disabled = false;

			}
			//定义一个重新验证的方法
			function again() {

			}
			$("#phone").change(function() {

			})

			function f() {
				// 获取的用户名
				var key = document.getElementById("phone").value;
				var value = getCookie(key);
				if(value != "") {
					document.getElementById("password").value = value;
					document.getElementById("checkbox").checked = true;
				} else {
					document.getElementById("password").value = "";
					document.getElementById("checkbox").checked = false;
				}
			}
			// 通过cookie的key,获取对应value值
			function getCookie(cname) {
				var name = cname + "=";
				var ca = document.cookie.split(';');
				for(var i = 0; i < ca.length; i++) {
					var c = ca[i].trim();
					if(c.indexOf(name) == 0) {
						return c.substring(name.length, c.length);
					}
				}
				return "";
			}
		</script>

	</body>

</html>